<template>
  <div>
    <!-- <div >
      <h3 id="t1">全站公告</h3>
    </div> -->
    <div class="notice-block text-center" m="t-4">
      <el-carousel trigger="click" height="150px" arrow="never" :pause-on-hover="false">
        <el-carousel-item v-for="item in noticeList" :key="item">
          <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
          <BlogNotice :notice="item"></BlogNotice>
        </el-carousel-item>
      </el-carousel>
      
    </div>
    <div class="notice-block">
      <el-divider />
    </div>
    <el-row>
      <el-col :span="18">
        <div>
          <h3 id="t2">最新博客</h3>
        </div>
        <div id="cardbox">
          <BlogCard class="BlogCard" v-if="!articleList"></BlogCard>
          <BlogCard class="BlogCard"
            v-else
            v-for="article in articleList"
            :key="article"
            :article="article"
          ></BlogCard>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <h3 id="t3">博客热榜</h3>
        </div>
        <div id="rebang">
          <el-card class="box-card" shadow="never">
            <div v-for="(article, index) in HotArticle" :key="index" class="text item">
              <el-link @click="linkClick(article.id)" 
                :type="index === 0 ? 'primary' : index === 1 ? 'success' : index === 2 ? 'warning' : 'info'">
                {{ index+1 + ' ' + article.title }}
              </el-link>
            </div>
          </el-card>
        </div>
        <div>
          <h3 id="t4">全站词云</h3>
        </div>
        <el-card id="cloudWord" shadow="never" 
          style="margin-top: 20px; height:32vh; width: 18vw;"
        ></el-card>
        <div>
          <h3 id="t5">热门标签</h3>
        </div>
        <el-card shadow="never" 
          style="margin-top: 20px; height:32vh; width: 18vw;"
        >
          <el-tag class="hottag" effect="plain" v-for="tag in tagList" :key="tag" @click="tagOnClick(tag.name)">{{tag.name}}</el-tag>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '../../api/data.js'
import BlogCard from '@/components/BlogCard'
import BlogNotice from '@/components/BlogNotice'
import { ElMessage } from 'element-plus'
import echarts from 'echarts'
import 'echarts-wordcloud'
export default {
  name: 'BlogHome',
  components: {
    BlogCard,
    BlogNotice
  },
  data () {
    return {
      HotArticle: [],
      noticeList: [],
      tagList: [],
      articleList: null,
      wordCloud: null
  }},
  methods: {
    tagOnClick (tagName) {
      this.$router.push({path: '/blogs', query: {tag: tagName}})
    },
    linkClick (id) {
      this.$router.push({path: '/article', query: {articleId: id}})
    }
  },
  mounted () {
    api.getArticleByCategory({
      token: this.$store.state.token,
      category: '',
      pageSize: 10,
      currentPage: 1
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        this.articleList = res.data.articleList
        // console.log(this.articleList)
      } else {
        ElMessage.error(res.message)
      }
    })
    api.getAllTag({
      token: this.$store.state.token,
      pageSize: 45,
      currentPage: 1
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        this.tagList = res.data.tagList
        this.tagList.splice(35, this.tagList.length-35);
      } else {
        ElMessage.error(res.message)
      }
    })
    api.articleRank({
      token: this.$store.state.token
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        this.HotArticle = res.data.articleList
      } else {
        ElMessage.error(res.message)
      }
    })
    api.getAllNotice({
      token: this.$store.state.token
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        this.noticeList = res.data.noticeList
      } else {
        ElMessage.error(res.message)
      }
    })
    api.allWordCloud({
      token: this.$store.state.token
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        this.wordCloud = res.data.wordCloud.map((item) => ({
          name: item['tagName'],
          value: item['count']
        }));
        if (this.wordCloud) {
          let cloud = echarts.init(document.getElementById('cloudWord'))
          cloud.setOption({
            backgroundColor: '#fff', // canvas背景颜色
            // canvas标题配置项
            title: {
                text: '',
                top: '0%',
                left: '-1%',
                textStyle: {
                    fontSize: 14,
                    color: '#3B3E41',
                    fontWeight: 'normal'
                }
            },
            series: [
              {
                type: 'wordCloud',
                left: '0%',                 // X轴偏移量
                top: '0%',                  // Y轴偏移量
                width: '100%',               // canvas宽度大小
                height: '100%',              // canvas高度大小
                sizeRange: [12, 50],         //  词典字体大小范围配置
                rotationRange: [0, 0],       // 词典字体旋转角度配置，默认不旋转
                gridSize: 25,                // 词典字体间距配置
                layoutAnimation: true,       // 为false词典过度会阻塞
                textStyle: {                 // 词典样式配置
                  normal: {
                    color() {
                      // 颜色随机渐变
                      let colors = ['#fe9a8bb3', '#fe9a8bb3', '#fe9a8b03', '#9E87FFb3', '#9E87FFb3', '#9E87FFb3', '#fe9a8bb3', '#fe9a8bb3', '#fe9a8bb3', '#73DDFF', '#58D5FF']
                      return colors[parseInt(Math.random() * 10)]
                    }
                  }
                },
                // 渲染词典数据
                data: [
                  // {
                  //   value: '50',          // 词典大小配置
                  //   name: 'iPhone 13',    // 词典名称配置
                  //   textStyle: {          // 单独配置某个词典样式
                  //   shadowBlur: 4,
                  //   shadowOffsetY: 14,
                  //   color: '#BDBEFA'
                  //   }
                  // },
                  ...this.wordCloud
                ]
              }
            ]
          })
        }
      } else {
        ElMessage.error(res.message)
      }
    })
  }
}
</script>

<style scoped>
#t1 {
  margin-top: 0;
  margin-left: 8vw;
}
.notice-block {
  width: 84vw;
  margin-left: 8vw;
  /* width: 40vw; */
  /* margin: 20px; */
  height: 3vh;
}
#t2 {
  margin-top: 5vh;
  margin-left: 8vw;
}
#cardbox {
  margin-left: 8vw;
}
.BlogCard {
  margin-top: 2vh;
}
#t3 {
  margin-top: 5vh;
}
#rebang {
  width: 18vw;
}
#rebang .el-link {
  margin: 10px;
}
.hottag {
  margin: 3px;
  cursor: pointer;
}
/* .el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
} */

/* .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
} */

/* .el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */
</style>
